<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">密码设置</view>
			</block>
		</cu-custom>
		<view class="addContent">
			<view class="selType">新建密码</view>
			<view class="setpassword-content border-bottom">
				<view class="title flex-sub">新密码</view>
				<view class="flex-treble text-right">
					<input class="text-lg text-d5d8d9" password placeholder="新密码为8-18位数字/字母/符合" name="input" maxlength="18"  v-model="passwordOne"></input>
				</view>
			</view>
			<view class="setpassword-content">
				<view class="title flex-sub">确认密码</view>
				<view class="flex-treble text-right">
					<input class="text-lg text-d5d8d9" password placeholder="请再次输入密码" name="input" v-model="passwordTwo"></input>
				</view>
			</view>
		</view>
		<view class="footer flex align-center justify-center">
			<button class="cu-btn submit-btn" @click="handlePassword">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selTab:1,
				content:'',
				passwordOne:'',
				passwordTwo:''
			}
		},
		onLoad(){
		},
		methods: {
			toAddFeedBack(){
				uni.navigateTo({
					url:"/pages/setting/addFeedBack"
				})
			},
			handlePassword(){
				if(this.passwordOne.length >= 8 && this.passwordOne.length <= 18 && this.passwordTwo.length >= 8 && this.passwordTwo.length <= 18){
					if(this.passwordOne == this.passwordTwo){
						uni.showToast({
							title:'暂未开放',
							icon:'none'
						})
					}else{
						uni.showToast({
							title:'两次输入不一致，请检查重新输入',
							icon:'none'
						})
					}
				}else{
					uni.showToast({
						title:'请检查密码长度在8-18位之间',
						icon:'none'
					})
				}
				
			}
			
		}
	}
</script>

<style>
	page{background: linear-gradient(180deg, rgba(244,244,244,0) 10%, #F4F4F4 19%);}
</style>
<style scoped lang="less">
	.addContent{
		margin: 46rpx 32rpx;
		padding: 32rpx 32rpx 48rpx;
		background-color: #fff;
		border-radius: 48rpx;
		.selType{
			font-size: 28rpx;
			font-weight: 500;
			color: #010101;
		}
		.setpassword-content{
			padding: 48rpx 0;
			display: flex;
			align-content: center;
			justify-content: space-between;
			.title{
				font-size: 32rpx;
				color: #767879;
			}
		}
		.border-bottom{
			border-bottom: 1rpx solid #D9D9D9;
		}
	}
	.footer{
		position: fixed;
		bottom: 100rpx;
		width: 100%;
	}
</style>